<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>bootstrap</title>
  <link href="bootstrap/bootstrap.min.css" rel="stylesheet">
  <link href="css/login.css" rel="stylesheet">
</head>

<body>
  <!-- Fixed navbar -->
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">测试</a>
      </div>
      <div class="navbar-collapse collapse" id="navbar">
        <ul class="nav navbar-nav">
          <li><a href="#">首页</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right" id="loginarea">
          <li><a class="navsign" id="navsignin">登录</a></li>
          <li><a class="navsign" id="navsignup">注册</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right" id="userarea" hidden>
          <li><a class="nav_userarea" id="nav_nickname">用户名</a></li>
          <li><a class="nav_userarea" id="nav_logout">注销</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>
  <!-- 模态框（Modal） -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <div class="switch">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>
                            <span class="sign sign_focus" id="signin">登录</span>
                            <span class="sign sign_unfocus" id="signup">注册</span>
                        </h3>
            <div class="switch_bottom" id="switch_bottom"></div>
          </div>
          <div id="myCarousel" class="carousel slide">
            <div class="form_area carousel-inner">
              <div class="item" id="signin_form">
                <form class="form-horizontal" role="form">
                  <div class="form-group">
                    <label class="col-sm-3 control-label">用户名</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label">密码</label>
                    <div class="col-sm-9">
                      <input type="password" class="form-control" id="password" placeholder="请输入密码">
                    </div>
                  </div>
                  <div class="form-group" id="form_other">
                    <div class="col-sm-offset-3 col-sm-9">
                      <div class="checkbox">
                        <label>
                          <input type="checkbox"> 下次自动登录
                        </label>
                        <a href="#" class="forget">忘记密码</a>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-4 col-sm-8">
                      <button class="btn submit" id="login_submit">登录</button>
                    </div>
                  </div>
                </form>
              </div>
              <div class="item" id="signup_form">
                <form class="form-horizontal" role="form" action="">
                  <div class="form-group">
                    <label class="col-sm-3 control-label">用户名</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="username1" placeholder="请输入用户名">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label">密码</label>
                    <div class="col-sm-9">
                      <input type="password" class="form-control" id="password1" placeholder="请输入密码">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label">确认密码</label>
                    <div class="col-sm-9">
                      <input type="password" class="form-control" id="password2" placeholder="请输入密码">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-4 col-sm-8">
                      <button class="btn submit" id="register_submit">注册</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
  </div>
  <!-- /.modal -->
  <!-- js -->
  <script src="bootstrap/jquery-2.2.4.min.js"></script>
  <script src="bootstrap/bootstrap.min.js"></script>
  <script src="js/login.js"></script>
</body>

</html>
